<template>
	<view class="container">
		<statusBar></statusBar>
		<view class="setting-right">
			<view class="score">
				<image src="/static/mine/score.svg" mode=""></image>
				<text>999</text>
			</view>
			<image @click="handleSetting" src="/static/mine/setting.svg" mode=""></image>
		</view>
		<view class="avatar" @click="handleEditInfo">
			<image src="/static/mine/t.svg" mode=""></image>
			<view class="">
				<text>胖头鱼</text>
				<text>未设置签名</text>
			</view>
		</view>
		<view class="nav-bar">
			<view @click="handleLike">
				<text>1</text>
				<text>获赞与收藏</text>
			</view>
			<view>
				<text>0</text>
				<text>粉丝</text>
			</view>
			<view>
				<text>34</text>
				<text>关注</text>
			</view>
			<view @click="handlePost">
				<text>0</text>
				<text>帖子</text>
			</view>
		</view>
		<view class="order">
			<view class="order-title">
				购买订单
			</view>
			<view class="nav">
				<view>
					<image src="/static/mine/icon1.svg" mode=""></image>
					<text>待付款</text>
				</view>
				<view>
					<image src="/static/mine/icon2.svg" mode=""></image>
					<text>待发货</text>
				</view>
				<view>
					<image src="/static/mine/icon3.svg" mode=""></image>
					<text>待收货</text>
				</view>
				<view>
					<image src="/static/mine/icon4.svg" mode=""></image>
					<text>已完成</text>
				</view>
				<view>
					<image src="/static/mine/icon5.svg" mode=""></image>
					<text>退款/售后</text>
				</view>
			</view>
		</view>
		<view class="aside">
			<view>
				<view>
					<text>关注公众号</text>
					<text>随时获取最新咨询</text>
				</view>
				<image src="/static/mine/wechat.svg" mode=""></image>
			</view>
			<view>
				<view>
					<text>邀请有礼</text>
					<text>赢¥500通用卷</text>
				</view>
				<image src="/static/mine/gife.svg" mode=""></image>
			</view>
		</view>
		<view class="order">
			<view class="order-title">
				其他订单
			</view>
			<view class="nav other">
				<view>
					<image src="/static/mine/icon6.svg" mode=""></image>
					<text>鉴定</text>
				</view>
				<view>
					<image src="/static/mine/icon7.svg" mode=""></image>
					<text>养护</text>
				</view>
				<view>
					<image src="/static/mine/icon8.svg" mode=""></image>
					<text>回收</text>
				</view>
				<view>
					<image src="/static/mine/icon9.svg" mode=""></image>
					<text>找货</text>
				</view>
			</view>
		</view>
		<view class="apply">
			<view>
				<image src="/static/mine/icon_ge.svg" mode=""></image>
				<view>
					申请成为个人商家
				</view>
				<image src="/static/mine/right.svg" mode=""></image>
			</view>
			<view>
				<image src="/static/mine/icon_qi.svg" mode=""></image>
				<view>
					申请成为企业商家
				</view>
				<image src="/static/mine/right.svg" mode=""></image>
			</view>

		</view>
		<view class="order">
			<view class="order-title">
				更多服务
			</view>
			<view class="nav other more">
				<view>
					<image src="/static/mine/icon6.svg" mode=""></image>
					<text>地址管理</text>
				</view>
				<view>
					<image src="/static/mine/icon7.svg" mode=""></image>
					<text>客服中心</text>
				</view>
				<view>
					<image src="/static/mine/icon8.svg" mode=""></image>
					<text>建议反馈</text>
				</view>
			</view>
		</view>
		<likeModal ref="likeModalRef" />
	</view>
</template>

<script setup>
	import likeModal from './components/likeModal.vue';
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const handleSetting = () => {
		uni.navigateTo({
			url:'/pages/mine/setting/setting'
		})
	}
	const handleEditInfo = () => {
		uni.navigateTo({
			url:'/pages/mine/editInfo/editInfo'
		})
	}

	const handlePost = () => {
		uni.navigateTo({
			url:'/pages/myPost/index'
		})
	}
	// 赞与收藏
	const likeModalRef= ref(null)
	const handleLike = () => {
		likeModalRef.value.popup.open()
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #FFFFFF 0%, #F4F3F7 50%, #F4F3F7 100%);
		padding: 0 30rpx 100rpx 30rpx;

		.setting-right {
			display: flex;
			margin-top: 12rpx;
			justify-content: flex-end;
			align-items: center;

			.score {
				position: relative;
				margin-right: 36rpx;

				image {
					height: 68rpx;
					width: 142rpx;
				}

				text {
					position: absolute;
					right: 12rpx;
					top: 18rpx;
					color: #2F4142;
					font-size: 36rpx;
					font-weight: 500;
				}
			}

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.avatar {
			margin-top: 38rpx;
			display: flex;
			align-items: center;

			image {
				width: 112rpx;
				height: 112rpx;
				border-radius: 100%;
				background: #F2F4F7;
				margin-right: 20rpx;
			}

			view {
				font-family: PingFangSC, PingFang SC;

				text:first-child {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
					line-height: 36rpx;
					display: block;
					margin-bottom: 16rpx;
				}

				text:last-child {
					font-weight: 400;
					font-size: 24rpx;
					color: #59575F;
					line-height: 24rpx;
				}
			}
		}

		.nav-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			margin: 30rpx 0;

			view {
				text-align: center;

				text:first-child {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 38rpx;
					display: block;
					margin-bottom: 16rpx;
				}

				text:last-child {
					font-weight: 400;
					font-size: 22rpx;
					color: #807F8A;
					line-height: 24rpx;
				}
			}
		}

		.order {
			background: #FFFFFF;
			border-radius: 4rpx;
			padding: 30rpx 24rpx;
			margin-bottom: 20rpx;

			.order-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 28rpx;
			}

			.nav {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 50rpx;

				view {
					text-align: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #807F8A;
						line-height: 24rpx;
						margin-top: 20rpx;
						display: block;
					}
				}
			}

			.other {
				view {
					image {
						width: 80rpx;
						height: 80rpx;
					}

					text {
						margin-top: 16rpx;
					}

				}
			}

			.more {
				justify-content: flex-start;

				view {
					width: 25%;
					text-align: left;

					text {
						margin-top: 12rpx;
					}
				}
			}
		}

		.aside {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 20rpx;

			>view {
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				padding: 28rpx 12rpx 28rpx 20rpx;
				width: 50%;
				border-radius: 4rpx;

				view {
					text:first-child {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #222222;
						line-height: 30rpx;
					}

					text:last-child {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A9A7B3;
						line-height: 28rpx;
						margin-top: 16rpx;
						display: block;
					}
				}

				image {
					width: 68rpx;
					height: 68rpx;
				}
			}
		}
		.apply{
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 20rpx;
			>view {
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				padding: 32rpx 14rpx;
				width: 50%;
				border-radius: 4rpx;
				image{
					width: 32rpx;
					height: 32rpx;
				}
				view{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					line-height: 39rpx;
				}
			}
		}
	}
</style>